<template>
  <div :class="[...classes]" :style="styleses">
    <!-- <div :style="namestyle">{{ shengname }}</div> -->
    <div :style="logostyle">
      <icon-svg
        :icon-class="logo"
        :color="'yellow'"
        :width="iwidth"
        :height="iheight"
        style="cursor: pointer"
      ></icon-svg>
    </div>
    <div :style="lowstyle">{{ low }}</div>
    <div :style="typestyle" class>
      <div style="position: absolute; bottom: 0px;width: 100px;">{{ type }}</div>
    </div>
  </div>
</template>
<script>
import axios from "@/utils/requestdp";

import pinyin from "chinese-to-pinyin";

import titlemixins from "@/mixins/bigScreen/titlemixins";

export default {
  name: "titleweatherzz",
  mixins: [titlemixins],
  components: {},
  props: {
    content: {
      default: () => {
        return {
          name: "郑州",
        };
      },
    },
  },
  data() {
    return {
      low: "test",
      type: "test",
      logo: "test",
      shengname: "郑州",
    };
  },
  computed: {
    logostyle() {
      return {
        padding: "10px 20px",
      };
    },
    lowstyle() {
      return {
        fontSize: this.$root.setting.scale * 110 + "px",
      };
    },
    typestyle() {
      return {
        height: this.$root.setting.scale * 90 + "px",
        fontSize: this.$root.setting.scale * 30 + "px",
        position: "relative",
      };
    },
    iwidth() {
      return this.$root.setting.scale * 120 + "px";
    },
    iheight() {
      return this.$root.setting.scale * 120 + "px";
    },
    namestyle() {
      return {
        fontSize: this.$root.setting.scale * 120 + "px",
        padding: "0px 30px",
      };
    },
  },
  watch: {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      let _this = this;
      axios
        .get("wInfoController/getHourWeather")
        .then((res) => {
          // console.log(res);
          _this.low = res.data[0].temperature + '℃'
          _this.type = res.data[0].weather;
          _this.logo = pinyin(res.data[0].weather, {
            removeSpace: true,
            removeTone: true,
          });
        });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>